<!doctype html>
<html lang="zh-CN">
 <head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>年度规划项目 - 学员端</title> 
  <script src="../javascript/reload.js"></script> 
  <script src="./1967843857995399168/resource_6602010000.js"></script> 
  <link href="./1967843857995399168/all.min.css" rel="stylesheet"> 
  <script src="./1967843857995399168/echarts.min.js"></script> 
  <script>tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#4080FF',
                        accent: '#0E42D2',
                        neutral: '#F5F7FA',
                        'neutral-dark': '#E5E6EB',
                        'text-primary': '#1D2129',
                        'text-secondary': '#4E5969',
                        'text-tertiary': '#86909C',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    spacing: {
                        '220': '220px',
                        '250': '250px',
                    }
                },
            }
        }</script> 
  <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .menu-item {
                @apply flex items-center px-4 py-3 text-text-secondary hover:bg-neutral-dark transition-all duration-200 cursor-pointer;
            }
            .menu-item-active {
                @apply bg-primary/10 text-primary border-l-4 border-primary;
            }
            .submenu-item {
                @apply flex items-center px-8 py-2.5 text-text-secondary hover:bg-neutral-dark transition-all duration-200 cursor-pointer text-sm;
            }
            .submenu-item-active {
                @apply bg-primary/10 text-primary;
            }
            .card-shadow {
                box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.06);
            }
            .btn-primary {
                @apply bg-primary text-white px-4 py-2 rounded-md hover:bg-accent transition-all duration-200 flex items-center justify-center;
            }
            .btn-secondary {
                @apply bg-white text-primary border border-primary px-4 py-2 rounded-md hover:bg-primary/5 transition-all duration-200 flex items-center justify-center;
            }
            .btn-outline {
                @apply bg-white text-text-secondary border border-neutral-dark px-4 py-2 rounded-md hover:bg-neutral transition-all duration-200 flex items-center justify-center;
            }
            .input-field {
                @apply w-full px-3 py-2 border border-neutral-dark rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all duration-200;
            }
            .table-header {
                @apply bg-neutral text-text-secondary text-sm font-medium px-4 py-3;
            }
            .table-row {
                @apply border-b border-neutral-dark hover:bg-neutral/50 transition-all duration-200;
            }
            .badge {
                @apply px-2 py-1 rounded-full text-xs font-medium;
            }
            .badge-success {
                @apply bg-green-100 text-green-700;
            }
            .badge-warning {
                @apply bg-yellow-100 text-yellow-700;
            }
            .badge-danger {
                @apply bg-red-100 text-red-700;
            }
            .badge-info {
                @apply bg-blue-100 text-blue-700;
            }
            .badge-purple {
                @apply bg-purple-100 text-purple-700;
            }
        }
    </style> 
 </head> 
 <body class="font-inter bg-neutral text-text-primary h-screen flex overflow-hidden"> 
  <!-- 左侧菜单区域 --> 
  <aside id="sidebar" class="w-220 bg-white h-full shadow-md z-10 transition-all duration-300 ease-in-out"> 
   <!-- 品牌标识 --> 
   <div class="flex items-center justify-center h-16 border-b border-neutral-dark"> 
    <div class="flex items-center"> 
     <i class="fas fa-chart-line text-primary text-2xl mr-3"> </i> 
     <h1 class="text-xl font-bold text-primary"> Hi Quick AI </h1> 
    </div> 
   </div> 
   <!-- 菜单列表 --> 
   <nav class="py-4 h-[calc(100%-4rem)] overflow-y-auto scrollbar-hide" data-ytextravalue="extra-nxxt9xehf"> 
    <!-- 每月必做 --> 
    <div class="menu-group" data-ytoriginindex="0" data-ytindex="0"> 
     <a class="yt-a-defalut-link menu-item flex justify-between" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1378&amp;h=913&amp;appuuid=1969721745313103872&amp;version=2&amp;pageType=web&amp;uuid=1968264071639728128&amp;appName=demo" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: inline; padding: 0px; border: 0px; box-shadow: none;"> 
      <div class="menu-item flex justify-between" data-menu="monthly" data-selectorname="#id-a33rx" style> 
       <div class="flex items-center"> 
        <i class="fas fa-calendar-check text-lg mr-3"> </i> 
        <span> 工作台 </span> 
       </div> 
      </div> </a> 
     <div class="submenu hidden" id="submenu-monthly"> 
     </div> 
    </div> 
    <!-- 公司公告 --> 
    <div class="menu-group" data-ytextravalue="extra-26flsc3no">
     <a class="yt-a-defalut-link menu-item flex justify-between" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1359&amp;h=913&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1968578812111224832&amp;appName=demo" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: inline; padding: 0px; border: 0px; box-shadow: none;"> 
      <div class="menu-item flex justify-between" data-menu="announcements" data-ytparentvalue="extra-26flsc3no" data-ytoriginindex="0" data-ytindex="0" data-selectorname="#id-boafb" style="opacity: 1;"> 
       <div class="flex items-center"> 
        <i class="fas fa-bullhorn text-lg mr-3"> </i> 
        <span> 公司公告 </span> 
       </div> 
      </div> </a> 
     <div class="submenu hidden" id="submenu-announcements" data-ytoriginindex="1" data-ytindex="1"> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=2&amp;pageType=web&amp;uuid=1967783006529650688&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;"> </a> 
     </div> 
    </div> 
    <!-- 年规管理 --> 
    <div class="menu-group" data-ytoriginindex="2" data-ytindex="2"> 
     <div class="menu-item flex justify-between" data-menu="planning"> 
      <div class="flex items-center"> 
       <i class="fas fa-bullseye text-lg mr-3"> </i> 
       <span> 年规管理 </span> 
      </div> 
      <i class="fas fa-chevron-right text-xs transition-transform duration-200"> </i> 
     </div> 
     <div class="submenu hidden" id="submenu-planning" data-ytextravalue="extra-kk1xcan8m"> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1321&amp;h=831&amp;appuuid=1969721745313103872&amp;version=2&amp;pageType=web&amp;uuid=1969787710210048000&amp;appName=demo1" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="false" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" data-ytoriginindex="0" data-ytindex="0" data-ytparentvalue="extra-kk1xcan8m"> 
       <div class="submenu-item" data-page="goal-dashboard" data-selectorname="#id-ap7zf" style> 
        <i class="fas fa-chart-pie text-xs mr-2"> </i> 
        <span style> 目标进度看板 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1390&amp;h=831&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1969803110087917568&amp;appName=demo1" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="false" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" data-ytoriginindex="1" data-ytindex="1" data-ytparentvalue="extra-kk1xcan8m"> 
       <div class="submenu-item" data-page="performance-entry" data-selectorname="#id-ds0cu" style="cursor: move;"> 
        <i class="fas fa-pencil-alt text-xs mr-2"> </i> 
        <span> 业绩回填 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967832363245240320&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" data-ytoriginindex="2" data-ytindex="2" data-ytparentvalue="extra-kk1xcan8m"> 
       <div class="submenu-item" data-page="product-library" data-selectorname="#id-3dq17" style> 
        <i class="fas fa-box text-xs mr-2" style> </i> 
        <span style> 产品库 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1321&amp;h=831&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1969766167933353984&amp;appName=demo1" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="false" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" data-ytparentvalue="extra-kk1xcan8m" data-ytoriginindex="3" data-ytindex="3"> 
       <div class="submenu-item" data-page="marketing-plan" data-selectorname="#id-6ytae" style> 
        <i class="fas fa-bullhorn text-xs mr-2"> </i> 
        <span> 营销计划 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967839529905684480&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="false" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" data-ytoriginindex="4" data-ytindex="4"> 
       <div class="submenu-item" data-page="customer-records" data-selectorname="#id-u6l38" style> 
        <i class="fas fa-users text-xs mr-2"> </i> 
        <span style> 客户档案 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967841389332922368&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" data-ytoriginindex="5" data-ytindex="5"> 
       <div class="submenu-item" data-page="pk-activities" data-selectorname="#id-a74mh" style> 
        <i class="fas fa-trophy text-xs mr-2"> </i> 
        <span> PK 活动 </span> 
       </div> </a> 
     </div> 
    </div> 
    <!-- 工作管理 --> 
    <div class="menu-group" data-ytoriginindex="3" data-ytindex="3"> 
     <div class="menu-item menu-item-active flex justify-between" data-menu="work"> 
      <div class="flex items-center"> 
       <i class="fas fa-briefcase text-lg mr-3"> </i> 
       <span> 工作管理 </span> 
      </div> 
      <i class="fas fa-chevron-down text-xs transition-transform duration-200"> </i> 
     </div> 
     <div class="submenu" id="submenu-work"> 
      <div class="submenu-item submenu-item-active" data-page="work-dashboard"> 
       <i class="fas fa-chart-bar text-xs mr-2"> </i> 
       <span style="left:1px;position:relative"> 周日报管理 </span> 
      </div> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1245&amp;h=772&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967850301578805248&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: inline; padding: 0px; border: 0px; box-shadow: none;"> 
       <div class="submenu-item" data-page="meeting-plan" data-selectorname="#id-877xi" style> 
        <i class="fas fa-calendar-alt text-xs mr-2"> </i> 
        <span> 会议计划 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967852373321711616&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;"> 
       <div class="submenu-item" data-page="work-tasks" data-selectorname="#id-zuwhu" style> 
        <i class="fas fa-tasks text-xs mr-2"> </i> 
        <span> 工作任务 </span> 
       </div> </a> 
     </div> 
    </div> 
    <!-- 学习成长 --> 
    <div class="menu-group" data-ytoriginindex="4" data-ytindex="4"> 
     <div class="menu-item flex justify-between" data-menu="learning"> 
      <div class="flex items-center"> 
       <i class="fas fa-graduation-cap text-lg mr-3"> </i> 
       <span> 学习成长 </span> 
      </div> 
      <i class="fas fa-chevron-right text-xs transition-transform duration-200"> </i> 
     </div> 
     <div class="submenu hidden" id="submenu-learning" data-ytextravalue="extra-1whebfk2p"> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1113&amp;h=728&amp;appuuid=1969721745313103872&amp;version=2&amp;pageType=web&amp;uuid=1968967895824203776&amp;appName=年规学员端最新版1.1" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="false" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" data-ytoriginindex="0" data-ytindex="0" data-ytparentvalue="extra-1whebfk2p"> 
       <div class="submenu-item" data-page="company-culture" data-selectorname="#id-jf4sf" style> 
        <i class="fas fa-building text-xs mr-2"> </i> 
        <span style> 企业文化 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868783729049600&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="false" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" data-selectorname="#id-0o4d6" data-ytparentvalue="extra-1whebfk2p" data-ytoriginindex="1" data-ytindex="1"> 
       <div class="submenu-item" data-page="course-center" data-selectorname="#id-fl8fg" style> 
        <i class="fas fa-book-open text-xs mr-2"> </i> 
        <span style> 课程中心 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868795963834368&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" data-ytoriginindex="2" data-ytindex="2"> 
       <div class="submenu-item" data-page="knowledge-base" data-selectorname="#id-vwjqt" style> 
        <i class="fas fa-book text-xs mr-2"> </i> 
        <span style> 知识库 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868797977100288&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" data-ytoriginindex="3" data-ytindex="3"> 
       <div class="submenu-item" data-page="learning-plan" data-selectorname="#id-te536" style> 
        <i class="fas fa-clipboard-list text-xs mr-2"> </i> 
        <span style> 学习计划 </span> 
       </div> </a> 
     </div> 
    </div> 
    <!-- 个人档案 --> 
    <div class="menu-group" data-ytoriginindex="5" data-ytindex="5"> 
     <div class="menu-item flex justify-between" data-menu="profile"> 
      <div class="flex items-center"> 
       <i class="fas fa-user text-lg mr-3"> </i> 
       <span> 个人档案 </span> 
      </div> 
      <i class="fas fa-chevron-right text-xs transition-transform duration-200"> </i> 
     </div> 
     <div class="submenu hidden" id="submenu-profile"> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868800292356096&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;"> 
       <div class="submenu-item" data-page="basic-info" data-selectorname="#id-zk1w5" style> 
        <i class="fas fa-id-card text-xs mr-2"> </i> 
        <span> 基本信息 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" target="_top" is-page="true" href="javascript:void(0);" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868801315766272&amp;appName=年规学员端左侧菜单版" onclick="ytCustomLinkNavigation()" custom-a="true" is-add="true" style="display: flex; padding: 0px; border: 0px; box-shadow: none;"> 
       <div class="submenu-item" data-page="account-settings" data-selectorname="#id-9bks7" style> 
        <i class="fas fa-cog text-xs mr-2"> </i> 
        <span> 账号设置 </span> 
       </div> </a> 
     </div> 
    </div> 
   </nav> 
  </aside> 
  <!-- 右侧内容区域 --> 
  <main class="flex-1 flex flex-col overflow-hidden"> 
   <!-- 顶部导航栏 --> 
   <header class="h-16 bg-white border-b border-neutral-dark flex items-center justify-between px-6 z-10"> 
    <div class="flex items-center"> 
     <button id="toggle-sidebar" class="mr-4 text-text-secondary hover:text-primary transition-colors duration-200"> <i class="fas fa-bars text-xl"> </i> </button> 
     <div class="text-sm text-text-tertiary" id="breadcrumb"> 
      <span> 工作管理 </span> 
      <i class="fas fa-angle-right mx-2 text-xs"> </i> 
      <span> 周日报管理 </span> 
     </div> 
    </div> 
    <div class="flex items-center space-x-6"> 
     <div class="relative"> 
      <input type="text" placeholder="搜索..." class="pl-10 pr-4 py-2 rounded-full text-sm border border-neutral-dark focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary w-64"> 
      <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-text-tertiary"> </i> 
     </div> 
     <div class="relative"> 
      <button class="relative text-text-secondary hover:text-primary transition-colors duration-200"> <i class="fas fa-bell text-xl"> </i> <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"> </span> </button> 
     </div> 
     <div class="flex items-center cursor-pointer group"> 
      <img src="./1967843857995399168/f48e4ae6256cb09fa61d11486866b14f.png" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-transparent group-hover:border-primary transition-all duration-200"> 
      <div class="ml-2 hidden md:block"> 
       <div class="text-sm font-medium">
         张明 
       </div> 
       <div class="text-xs text-text-tertiary">
         销售部 
       </div> 
      </div> 
      <i class="fas fa-angle-down ml-1 text-text-tertiary"> </i> 
     </div> 
    </div> 
   </header> 
   <!-- 内容滚动区域 --> 
   <div class="flex-1 overflow-y-auto p-6 bg-neutral" id="content-area"> 
    <!-- 数据看板页面 --> 
    <div class="page active" id="page-work-dashboard"> 
     <div class="flex justify-between items-center mb-6" data-ytextravalue="extra-zlhyxytsw"> 
      <h2 class="text-2xl font-bold" data-ytparentvalue="extra-zlhyxytsw" data-ytoriginindex="0" data-ytindex="0"> 周日报管理系统 </h2> 
      <div class="flex space-x-3" data-ytoriginindex="1" data-ytindex="1"> 
       <button id="add-report-btn" class="btn-primary"> <i class="fas fa-plus mr-2"> </i> 添加周日报 </button> 
       <button id="import-report-btn" class="btn-secondary"> <i class="fas fa-upload mr-2"> </i> 导入 </button> 
       <button id="export-template-btn" class="btn-outline"> <i class="fas fa-download mr-2"> </i> 导出模板 </button> 
       <div class="relative"> 
        <select class="input-field pr-8 appearance-none bg-white"> <option value="month"> 本月 </option> <option value="quarter"> 本季度 </option> <option value="year"> 本年度 </option> <option value="custom"> 自定义 </option> </select> 
        <i class="fas fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-text-tertiary pointer-events-none"> </i> 
       </div> 
       <button class="btn-secondary"> <i class="fas fa-download mr-2"> </i> 导出报表 </button> 
       <button class="btn-primary"> <i class="fas fa-refresh mr-2"> </i> 刷新数据 </button> 
      </div> 
     </div> 
     <!-- 关键指标卡片 --> 
     <div class="grid grid-cols-12 gap-6 mb-6" data-ytextravalue="extra-rhn4r185o"> 
      <div class="col-span-3 bg-white rounded-lg card-shadow p-5 transition-all duration-300 hover:shadow-lg" data-ytoriginindex="0" data-ytindex="0"> 
       <div class="text-text-tertiary text-sm mb-2">
         周报统计 
       </div> 
       <div class="flex items-end justify-between mb-4"> 
        <div> 
         <span class="text-3xl font-bold"> 3/4 周 </span> 
         <span class="text-green-500 text-sm ml-2"> <i class="fas fa-arrow-up"> </i> 1 </span> 
        </div> 
        <div class="text-text-tertiary text-sm">
          本周新增 
        </div> 
       </div> 
       <div class="w-full bg-neutral rounded-full h-2 mb-1"> 
        <div class="bg-primary h-2 rounded-full" style="width: 75%"> 
        </div> 
       </div> 
       <div class="flex justify-between text-xs text-text-tertiary"> 
        <span> 已填写: 3周 </span> 
        <span> 完成率: 75% </span> 
       </div> 
      </div> 
      <div class="col-span-3 bg-white rounded-lg card-shadow p-5 transition-all duration-300 hover:shadow-lg" data-ytoriginindex="1" data-ytindex="1"> 
       <div class="text-text-tertiary text-sm mb-2">
         日报统计 
       </div> 
       <div class="flex items-end justify-between mb-4"> 
        <div> 
         <span class="text-3xl font-bold"> 18/22 天 </span> 
         <span class="text-green-500 text-sm ml-2"> <i class="fas fa-arrow-up"> </i> 3 </span> 
        </div> 
        <div class="text-text-tertiary text-sm">
          本周新增 
        </div> 
       </div> 
       <div class="w-full bg-neutral rounded-full h-2 mb-1"> 
        <div class="bg-secondary h-2 rounded-full" style="width: 82%"> 
        </div> 
       </div> 
       <div class="flex justify-between text-xs text-text-tertiary"> 
        <span> 已填写: 18天 </span> 
        <span> 完成率: 82% </span> 
       </div> 
      </div> 
     </div> 
     <!-- 周日报列表 --> 
     <div class="bg-white rounded-lg card-shadow mb-6 transition-all duration-300 hover:shadow-lg"> 
      <div class="p-5 border-b border-neutral-dark flex justify-between items-center"> 
       <h3 class="font-semibold text-lg"> 周日报记录 </h3> 
       <div class="relative"> 
        <input type="text" placeholder="搜索..." class="input-field w-64 pl-9"> 
        <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-text-tertiary"> </i> 
       </div> 
      </div> 
      <div class="overflow-x-auto"> 
       <table class="w-full"> 
        <thead> 
         <tr> 
          <th class="table-header text-left"> 日期 </th> 
          <th class="table-header text-left"> 类型 </th> 
          <th class="table-header text-left"> 提交状态 </th> 
          <th class="table-header text-left"> 业绩完成 </th> 
          <th class="table-header text-left"> 操作 </th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr class="table-row"> 
          <td class="px-4 py-3"> 2023-06-19 </td> 
          <td class="px-4 py-3"> 日报 </td> 
          <td class="px-4 py-3"> <span class="badge badge-success"> 已提交 </span> </td> 
          <td class="px-4 py-3"> 65% </td> 
          <td class="px-4 py-3"> <button class="text-primary hover:text-accent mr-3 edit-report"> <i class="fas fa-edit"> </i> </button> <button class="text-text-secondary hover:text-text-primary view-report"> <i class="fas fa-eye"> </i> </button> </td> 
         </tr> 
         <tr class="table-row"> 
          <td class="px-4 py-3"> 2023-06-18 </td> 
          <td class="px-4 py-3"> 日报 </td> 
          <td class="px-4 py-3"> <span class="badge badge-success"> 已提交 </span> </td> 
          <td class="px-4 py-3"> 62% </td> 
          <td class="px-4 py-3"> <button class="text-primary hover:text-accent mr-3 edit-report"> <i class="fas fa-edit"> </i> </button> <button class="text-text-secondary hover:text-text-primary view-report"> <i class="fas fa-eye"> </i> </button> </td> 
         </tr> 
         <tr class="table-row"> 
          <td class="px-4 py-3"> 2023-06-12至2023-06-18 </td> 
          <td class="px-4 py-3"> 周报 </td> 
          <td class="px-4 py-3"> <span class="badge badge-success"> 已提交 </span> </td> 
          <td class="px-4 py-3"> 58% </td> 
          <td class="px-4 py-3"> <button class="text-primary hover:text-accent mr-3 edit-report"> <i class="fas fa-edit"> </i> </button> <button class="text-text-secondary hover:text-text-primary view-report"> <i class="fas fa-eye"> </i> </button> </td> 
         </tr> 
         <tr class="table-row"> 
          <td class="px-4 py-3"> 2023-06-19 </td> 
          <td class="px-4 py-3"> 日报 </td> 
          <td class="px-4 py-3"> <span class="badge badge-warning"> 待提交 </span> </td> 
          <td class="px-4 py-3"> - </td> 
          <td class="px-4 py-3"> <button class="text-primary hover:text-accent mr-3 edit-report"> <i class="fas fa-edit"> </i> </button> <button class="text-text-secondary hover:text-text-primary view-report"> <i class="fas fa-eye"> </i> </button> </td> 
         </tr> 
        </tbody> 
       </table> 
      </div> 
      <div class="p-4 border-t border-neutral-dark flex justify-between items-center"> 
       <div class="text-sm text-text-tertiary">
         显示 1-4 条，共 12 条 
       </div> 
       <div class="flex space-x-2"> 
        <button class="btn-outline px-3 py-1 text-sm" disabled> 上一页 </button> 
        <button class="btn-primary px-3 py-1 text-sm"> 1 </button> 
        <button class="btn-outline px-3 py-1 text-sm"> 2 </button> 
        <button class="btn-outline px-3 py-1 text-sm"> 3 </button> 
        <button class="btn-outline px-3 py-1 text-sm"> 下一页 </button> 
       </div> 
      </div> 
     </div>
     <!-- 最近活动和待办任务 --> 
     <div class="grid grid-cols-12 gap-6"> 
      <!-- 最近工作活动 --> 
      <div class="col-span-6 bg-white rounded-lg card-shadow overflow-hidden transition-all duration-300 hover:shadow-lg"> 
       <div class="p-5 border-b border-neutral-dark flex justify-between items-center"> 
        <h3 class="font-semibold"> 最近工作活动 </h3> 
        <a href="javascript:void(0);" class="text-primary text-sm hover:underline"> 查看全部 </a> 
       </div> 
       <div class="divide-y divide-neutral-dark"> 
        <div class="p-4 hover:bg-neutral/50 transition-colors duration-200 flex"> 
         <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-primary flex-shrink-0"> 
          <i class="fas fa-file-invoice-dollar"> </i> 
         </div> 
         <div class="ml-3 flex-1"> 
          <div class="flex justify-between items-start"> 
           <p class="font-medium"> 完成了销售订单 #SO-2023-8542 </p> 
           <span class="text-xs text-text-tertiary"> 今天 09:32 </span> 
          </div> 
          <p class="text-sm text-text-secondary mt-1"> 客户: 北京科技有限公司，金额: ¥128,500 </p> 
         </div> 
        </div> 
        <div class="p-4 hover:bg-neutral/50 transition-colors duration-200 flex"> 
         <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600 flex-shrink-0"> 
          <i class="fas fa-user-plus"> </i> 
         </div> 
         <div class="ml-3 flex-1"> 
          <div class="flex justify-between items-start"> 
           <p class="font-medium"> 新增客户资料 </p> 
           <span class="text-xs text-text-tertiary"> 昨天 15:47 </span> 
          </div> 
          <p class="text-sm text-text-secondary mt-1"> 客户名称: 上海创新科技有限公司 </p> 
         </div> 
        </div> 
        <div class="p-4 hover:bg-neutral/50 transition-colors duration-200 flex"> 
         <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 flex-shrink-0"> 
          <i class="fas fa-calendar-check"> </i> 
         </div> 
         <div class="ml-3 flex-1"> 
          <div class="flex justify-between items-start"> 
           <p class="font-medium"> 完成了周度工作报告 </p> 
           <span class="text-xs text-text-tertiary"> 昨天 10:15 </span> 
          </div> 
          <p class="text-sm text-text-secondary mt-1"> 报告周期: 2023-06-12 至 2023-06-18 </p> 
         </div> 
        </div> 
        <div class="p-4 hover:bg-neutral/50 transition-colors duration-200 flex"> 
         <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600 flex-shrink-0"> 
          <i class="fas fa-comments"> </i> 
         </div> 
         <div class="ml-3 flex-1"> 
          <div class="flex justify-between items-start"> 
           <p class="font-medium"> 参加了产品培训会议 </p> 
           <span class="text-xs text-text-tertiary"> 2023-06-17 </span> 
          </div> 
          <p class="text-sm text-text-secondary mt-1"> 会议主题: 新产品功能介绍与销售策略 </p> 
         </div> 
        </div> 
        <div class="p-4 hover:bg-neutral/50 transition-colors duration-200 flex"> 
         <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center text-red-600 flex-shrink-0"> 
          <i class="fas fa-exclamation-circle"> </i> 
         </div> 
         <div class="ml-3 flex-1"> 
          <div class="flex justify-between items-start"> 
           <p class="font-medium"> 更新了客户跟进记录 </p> 
           <span class="text-xs text-text-tertiary"> 2023-06-16 </span> 
          </div> 
          <p class="text-sm text-text-secondary mt-1"> 客户: 广州未来科技有限公司，状态: 需求评估中 </p> 
         </div> 
        </div> 
       </div> 
      </div> 
      <!-- 待办任务列表 --> 
      <div class="col-span-6 bg-white rounded-lg card-shadow overflow-hidden transition-all duration-300 hover:shadow-lg"> 
       <div class="p-5 border-b border-neutral-dark flex justify-between items-center"> 
        <h3 class="font-semibold"> 待办工作任务 </h3> 
        <button class="btn-primary text-sm py-1 px-3"> <i class="fas fa-plus mr-1"> </i> 添加任务 </button> 
       </div> 
       <div class="divide-y divide-neutral-dark"> 
        <div class="p-4 hover:bg-neutral/50 transition-colors duration-200 flex items-center"> 
         <input type="checkbox" class="w-4 h-4 rounded text-primary focus:ring-primary/30 mr-3"> 
         <div class="flex-1"> 
          <div class="flex justify-between items-start"> 
           <p class="font-medium"> 完成第二季度销售报告 </p> 
           <span class="badge badge-danger"> 紧急 </span> 
          </div> 
          <div class="flex items-center mt-1 text-sm text-text-tertiary"> 
           <i class="fas fa-calendar-alt mr-1"> </i> 
           <span> 截止日期: 2023-06-30 </span> 
           <span class="mx-2"> • </span> 
           <i class="fas fa-user mr-1"> </i> 
           <span> 负责人: 张明 </span> 
          </div> 
         </div> 
        </div> 
        <div class="p-4 hover:bg-neutral/50 transition-colors duration-200 flex items-center"> 
         <input type="checkbox" class="w-4 h-4 rounded text-primary focus:ring-primary/30 mr-3"> 
         <div class="flex-1"> 
          <div class="flex justify-between items-start"> 
           <p class="font-medium"> 与上海科技公司进行产品演示 </p> 
           <span class="badge badge-warning"> 重要 </span> 
          </div> 
          <div class="flex items-center mt-1 text-sm text-text-tertiary"> 
           <i class="fas fa-calendar-alt mr-1"> </i> 
           <span> 截止日期: 2023-06-25 </span> 
           <span class="mx-2"> • </span> 
           <i class="fas fa-user mr-1"> </i> 
           <span> 负责人: 张明 </span> 
          </div> 
         </div> 
        </div> 
        <div class="p-4 hover:bg-neutral/50 transition-colors duration-200 flex items-center"> 
         <input type="checkbox" class="w-4 h-4 rounded text-primary focus:ring-primary/30 mr-3"> 
         <div class="flex-1"> 
          <div class="flex justify-between items-start"> 
           <p class="font-medium"> 更新客户管理系统数据 </p> 
           <span class="badge badge-info"> 常规 </span> 
          </div> 
          <div class="flex items-center mt-1 text-sm text-text-tertiary"> 
           <i class="fas fa-calendar-alt mr-1"> </i> 
           <span> 截止日期: 2023-06-28 </span> 
           <span class="mx-2"> • </span> 
           <i class="fas fa-user mr-1"> </i> 
           <span> 负责人: 张明 </span> 
          </div> 
         </div> 
        </div> 
        <div class="p-4 hover:bg-neutral/50 transition-colors duration-200 flex items-center"> 
         <input type="checkbox" class="w-4 h-4 rounded text-primary focus:ring-primary/30 mr-3"> 
         <div class="flex-1"> 
          <div class="flex justify-between items-start"> 
           <p class="font-medium"> 准备下周团队周会材料 </p> 
           <span class="badge badge-info"> 常规 </span> 
          </div> 
          <div class="flex items-center mt-1 text-sm text-text-tertiary"> 
           <i class="fas fa-calendar-alt mr-1"> </i> 
           <span> 截止日期: 2023-06-26 </span> 
           <span class="mx-2"> • </span> 
           <i class="fas fa-user mr-1"> </i> 
           <span> 负责人: 张明 </span> 
          </div> 
         </div> 
        </div> 
        <div class="p-4 hover:bg-neutral/50 transition-colors duration-200 flex items-center"> 
         <input type="checkbox" class="w-4 h-4 rounded text-primary focus:ring-primary/30 mr-3"> 
         <div class="flex-1"> 
          <div class="flex justify-between items-start"> 
           <p class="font-medium"> 跟进广州未来科技有限公司报价 </p> 
           <span class="badge badge-warning"> 重要 </span> 
          </div> 
          <div class="flex items-center mt-1 text-sm text-text-tertiary"> 
           <i class="fas fa-calendar-alt mr-1"> </i> 
           <span> 截止日期: 2023-06-24 </span> 
           <span class="mx-2"> • </span> 
           <i class="fas fa-user mr-1"> </i> 
           <span> 负责人: 张明 </span> 
          </div> 
         </div> 
        </div> 
       </div> 
       <div class="p-4 text-center border-t border-neutral-dark"> 
        <a href="javascript:void(0);" class="text-primary text-sm hover:underline"> 查看全部任务 </a> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!-- 添加/编辑周日报弹窗 --> 
    <div id="report-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> 
     <div class="bg-white rounded-lg w-full max-w-4xl max-h-[90vh] overflow-y-auto"> 
      <div class="p-5 border-b border-neutral-dark flex justify-between items-center sticky top-0 bg-white z-10"> 
       <h3 class="text-xl font-bold" id="modal-title"> 添加日报 </h3> 
       <button id="close-modal" class="text-text-tertiary hover:text-text-primary"> <i class="fas fa-times text-xl"> </i> </button> 
      </div> 
      <div class="p-5"> 
       <form id="report-form"> 
        <div class="mb-6"> 
         <label class="block text-text-secondary mb-2 font-medium"> 报告类型 <span class="text-red-500"> * </span> </label> 
         <div class="flex space-x-4"> 
          <label class="inline-flex items-center"> <input type="radio" name="report-type" value="daily" checked class="mr-2 text-primary"> <span> 日报 </span> </label> 
          <label class="inline-flex items-center"> <input type="radio" name="report-type" value="weekly" class="mr-2 text-primary"> <span> 周报 </span> </label> 
         </div> 
        </div> 
        <div class="grid grid-cols-2 gap-6 mb-6"> 
         <div id="daily-date-container"> 
          <label class="block text-text-secondary mb-2 font-medium"> 报告日期 <span class="text-red-500"> * </span> </label> 
          <input type="date" name="report-date" class="input-field" required> 
         </div> 
         <div id="weekly-period-container" class="hidden"> 
          <label class="block text-text-secondary mb-2 font-medium"> 报告周期 <span class="text-red-500"> * </span> </label> 
          <div class="flex items-center space-x-2"> 
           <input type="date" name="week-start" class="input-field" required> 
           <span class="text-text-tertiary"> 至 </span> 
           <input type="date" name="week-end" class="input-field" required> 
          </div> 
         </div> 
        </div> 
        <!-- 过程量部分 --> 
        <div class="mb-8"> 
         <h4 class="text-lg font-semibold mb-4 pb-2 border-b border-neutral-dark"> 过程量 <span class="text-red-500"> * </span> </h4> 
         <div class="grid grid-cols-3 gap-4"> 
          <div data-ytextravalue="extra-8nfdpfzsn"> 
           <label class="block text-text-secondary mb-1 text-sm" data-ytparentvalue="extra-8nfdpfzsn" data-ytoriginindex="0" data-ytindex="0"> 关键词收集数&nbsp;* </label> 
           <input type="number" name="keyword-count" class="input-field" required min="0" data-ytoriginindex="1" data-ytindex="1"> 
          </div> 
          <div> 
           <label class="block text-text-secondary mb-1 text-sm"> 新发产品数&nbsp;* </label> 
           <input type="number" name="new-products" class="input-field" required min="0"> 
          </div> 
          <div> 
           <label class="block text-text-secondary mb-1 text-sm"> 修改产品次数&nbsp;* </label> 
           <input type="number" name="product-modifications" class="input-field" required min="0"> 
          </div> 
          <div data-ytextravalue="extra-pw7hidtst"> 
           <label class="block text-text-secondary mb-1 text-sm" data-ytparentvalue="extra-pw7hidtst" data-ytoriginindex="0" data-ytindex="0"> 访客营销数&nbsp;* </label> 
           <input type="number" name="visitor-marketing" class="input-field" required min="0" data-ytoriginindex="1" data-ytindex="1"> 
          </div> 
          <div data-ytextravalue="extra-qjavfdjds"> 
           <label class="block text-text-secondary mb-1 text-sm" data-ytparentvalue="extra-qjavfdjds" data-ytoriginindex="0" data-ytindex="0"> SNS内容分享数&nbsp;* </label> 
           <input type="number" name="sns-shares" class="input-field" required min="0" data-ytoriginindex="1" data-ytindex="1"> 
          </div> 
          <div> 
           <label class="block text-text-secondary mb-1 text-sm"> TM咨询客户数&nbsp;* </label> 
           <input type="number" name="tm-consultations" class="input-field" required min="0"> 
          </div> 
          <div> 
           <label class="block text-text-secondary mb-1 text-sm"> 询盘数&nbsp;* </label> 
           <input type="number" name="inquiries" class="input-field" required min="0"> 
          </div> 
          <div> 
           <label class="block text-text-secondary mb-1 text-sm"> RFQ报价数&nbsp;* </label> 
           <input type="number" name="rfq-quotes" class="input-field" required min="0"> 
          </div> 
          <div data-ytextravalue="extra-e8lbtzw1m"> 
           <label class="block text-text-secondary mb-1 text-sm" data-ytparentvalue="extra-e8lbtzw1m" data-ytoriginindex="0" data-ytindex="0"> 粉丝通&nbsp;* </label> 
           <input type="number" name="fans-communication" class="input-field" required min="0" data-ytoriginindex="1" data-ytindex="1"> 
          </div> 
          <div data-ytextravalue="extra-8b1iti7qg"> 
           <label class="block text-text-secondary mb-1 text-sm" data-ytparentvalue="extra-8b1iti7qg" data-ytoriginindex="0" data-ytindex="0"> EDM营销&nbsp;* </label> 
           <input type="number" name="edm-marketing" class="input-field" required min="0" data-ytoriginindex="1" data-ytindex="1"> 
          </div> 
          <div> 
           <label class="block text-text-secondary mb-1 text-sm"> 小满新建档案客户数&nbsp;* </label> 
           <input type="number" name="new-customers-xiaoman" class="input-field" required min="0"> 
          </div> 
          <div data-ytextravalue="extra-te1rzpvrz"> 
           <label class="block text-text-secondary mb-1 text-sm" data-ytparentvalue="extra-te1rzpvrz" data-ytoriginindex="0" data-ytindex="0"> 小满发邮件&nbsp;* </label> 
           <input type="number" name="emails-xiaoman" class="input-field" required min="0" data-ytoriginindex="1" data-ytindex="1"> 
          </div> 
          <div> 
           <label class="block text-text-secondary mb-1 text-sm"> 小满新机商机数&nbsp;* </label> 
           <input type="number" name="business-opportunities-xiaoman" class="input-field" required min="0"> 
          </div> 
          <div data-ytextravalue="extra-ednxguvs8"> 
           <label class="block text-text-secondary mb-1 text-sm" data-ytparentvalue="extra-ednxguvs8" data-ytoriginindex="0" data-ytindex="0"> 小满群发邮件&nbsp;* </label> 
           <input type="number" name="mass-emails-xiaoman" class="input-field" required min="0" data-ytoriginindex="1" data-ytindex="1"> 
          </div> 
          <div data-ytextravalue="extra-3utputyfl"> 
           <label class="block text-text-secondary mb-1 text-sm" data-ytparentvalue="extra-3utputyfl" data-ytoriginindex="0" data-ytindex="0"> 开发信邮件发&nbsp;* </label> 
           <input type="number" name="development-emails" class="input-field" required min="0" data-ytoriginindex="1" data-ytindex="1"> 
          </div> 
          <div data-ytextravalue="extra-rm65sv8u3"> 
           <label class="block text-text-secondary mb-1 text-sm" data-ytparentvalue="extra-rm65sv8u3" data-ytoriginindex="0" data-ytindex="0"> 报价单制作&nbsp;* </label> 
           <input type="number" name="quotations-made" class="input-field" required min="0" data-ytoriginindex="1" data-ytindex="1"> 
          </div> 
          <div> 
           <label class="block text-text-secondary mb-1 text-sm"> 电话拜访客户&nbsp;* </label> 
           <input type="number" name="phone-calls" class="input-field" required min="0"> 
          </div> 
          <div> 
           <label class="block text-text-secondary mb-1 text-sm"> 客户来访&nbsp;* </label> 
           <input type="number" name="customer-visits" class="input-field" required min="0"> 
          </div> 
         </div> 
        </div> 
        <!-- 业绩目标部分 --> 
        <div class="mb-8"> 
         <h4 class="text-lg font-semibold mb-4 pb-2 border-b border-neutral-dark"> 业绩目标 </h4> 
         <div class="grid grid-cols-2 gap-4"> 
          <div> 
           <label class="block text-text-secondary mb-1 text-sm"> 当月业绩目标金额 </label> 
           <input type="number" name="monthly-target" class="input-field" min="0" step="0.01"> 
          </div> 
          <div> 
           <label class="block text-text-secondary mb-1 text-sm"> 当月业绩完成百分比 </label> 
           <input type="number" name="monthly-completion" class="input-field" min="0" max="100"> 
          </div> 
         </div> 
        </div> 
        <!-- 业绩进展部分 --> 
        <div class="mb-8"> 
         <h4 class="text-lg font-semibold mb-4 pb-2 border-b border-neutral-dark"> 业绩进展 </h4> 
         <div class="grid grid-cols-3 gap-4"> 
          <div> 
           <label class="block text-text-secondary mb-1 text-sm"> 寄样客户 </label> 
           <input type="number" name="sample-customers" class="input-field" min="0"> 
          </div> 
          <div> 
           <label class="block text-text-secondary mb-1 text-sm"> 打样客户 </label> 
           <input type="number" name="proofing-customers" class="input-field" min="0"> 
          </div> 
          <div> 
           <label class="block text-text-secondary mb-1 text-sm"> 意向客户 </label> 
           <input type="number" name="interested-customers" class="input-field" min="0"> 
          </div> 
          <div> 
           <label class="block text-text-secondary mb-1 text-sm"> 新签客户 </label> 
           <input type="number" name="new-signed-customers" class="input-field" min="0"> 
          </div> 
          <div> 
           <label class="block text-text-secondary mb-1 text-sm"> 订单笔数 </label> 
           <input type="number" name="order-count" class="input-field" min="0"> 
          </div> 
          <div> 
           <label class="block text-text-secondary mb-1 text-sm"> 销售金额 </label> 
           <input type="number" name="sales-amount" class="input-field" min="0" step="0.01"> 
          </div> 
         </div> 
        </div> 
        <!-- 备注部分 --> 
        <div class="mb-6"> 
         <label class="block text-text-secondary mb-2 font-medium"> 备注 </label> 
         <textarea name="notes" rows="4" class="input-field">
        </textarea> 
        </div> 
       </form> 
      </div> 
      <div class="p-5 border-t border-neutral-dark flex justify-end space-x-3 sticky bottom-0 bg-white z-10"> 
       <button id="cancel-report" class="btn-outline px-6"> 取消 </button> 
       <button id="save-report" class="btn-primary px-6"> 保存 </button> 
      </div> 
     </div> 
    </div> 
    <!-- 其他页面内容保持不变 --> 
    <div class="page hidden" id="page-monthly-tasks"> 
    </div> 
    <div class="page hidden" id="page-latest-announcements"> 
    </div> 
    <div class="page hidden" id="page-historical-announcements"> 
    </div> 
    <div class="page hidden" id="page-goal-dashboard"> 
    </div> 
    <div class="page hidden" id="page-performance-entry"> 
    </div> 
    <div class="page hidden" id="page-product-library"> 
    </div> 
    <div class="page hidden" id="page-marketing-plan"> 
    </div> 
    <div class="page hidden" id="page-customer-records"> 
    </div> 
    <div class="page hidden" id="page-pk-activities"> 
    </div> 
    <div class="page hidden" id="page-meeting-plan"> 
    </div> 
    <div class="page hidden" id="page-work-tasks"> 
    </div> 
   </div> 
  </main> 
  <script>// 页面加载时初始化
        document.addEventListener('DOMContentLoaded', () => {
            // 菜单切换功能
            const menuItems = document.querySelectorAll('.menu-item[data-menu]');
            menuItems.forEach(item => {
                item.addEventListener('click', () => {
                    // 移除所有菜单的活动状态
                    document.querySelectorAll('.menu-item').forEach(menu => { menu.classList.remove('menu-item-active'); });
                    
                    // 添加当前菜单的活动状态
                    item.classList.add('menu-item-active'); 
                    
                    const menuId = item.getAttribute('data-menu');
                    const submenu = document.getElementById(`submenu-${menuId}`);
                    const icon = item.querySelector('i:last-child');
                    
                    // 切换子菜单显示/隐藏
                    if (submenu && submenu.classList.contains('hidden')) {
                        submenu.classList.remove('hidden');
                        icon.classList.remove('fa-chevron-right');
                        icon.classList.add('fa-chevron-down');
                    } else if (submenu) {
                        submenu.classList.add('hidden');
                        icon.classList.remove('fa-chevron-down');
                        icon.classList.add('fa-chevron-right');
                    }
                });
            });
            
            // 子菜单切换功能
            const submenuItems = document.querySelectorAll('.submenu-item[data-page]');
            submenuItems.forEach(item => {
                item.addEventListener('click', () => {
                    // 移除所有子菜单的活动状态
                    document.querySelectorAll('.submenu-item').forEach(submenu => { submenu.classList.remove('submenu-item-active'); });
                    
                    // 添加当前子菜单的活动状态
                    item.classList.add('submenu-item-active');
                    
                    // 获取页面ID和面包屑信息
                    const pageId = item.getAttribute('data-page');
                    const parentMenu = item.closest('.submenu').id.replace('submenu-', '');
                    const parentMenuText = document.querySelector(`.menu-item[data-menu="${parentMenu}"] span`).textContent;
                    const currentMenuText = item.querySelector('span').textContent;
                    
                    // 更新面包屑
                    document.getElementById('breadcrumb').innerHTML = `









<span>${parentMenuText}</span>
  <i class="fas fa-angle-right mx-2 text-xs">
  </i>
  <span>${currentMenuText}</span>
    
    
    
    
    
    
    
    
    
  `;
                    
                    // 切换页面显示
                    document.querySelectorAll('.page').forEach(page => { page.classList.add('hidden'); });
                    document.getElementById(`page-${pageId}`).classList.remove('hidden');
                });
            });
            
            // 侧边栏切换功能
            const toggleSidebar = document.getElementById('toggle-sidebar');
            const sidebar = document.getElementById('sidebar');
            toggleSidebar.addEventListener('click', () => {
                if (sidebar.classList.contains('w-220')) {
                    sidebar.classList.remove('w-220');  
                    sidebar.classList.add('w-20');
                    // 隐藏菜单文本
                    document.querySelectorAll('.menu-item span:first-of-type').forEach(text => { text.classList.add('hidden'); });
                    document.querySelectorAll('.submenu').forEach(submenu => { submenu.classList.add('hidden'); });
                    document.querySelectorAll('.menu-item i:last-child').forEach(icon => { icon.classList.add('hidden'); });
                } else {
                    sidebar.classList.remove('w-20');
                    sidebar.classList.add('w-220');
                    // 显示菜单文本
                    document.querySelectorAll('.menu-item span:first-of-type').forEach(text => { text.classList.remove('hidden'); });
                    // 恢复之前打开的子菜单
                    document.querySelectorAll('.menu-item-active').forEach(menu => {
                        const menuId = menu.getAttribute('data-menu');
                        const submenu = document.getElementById(`submenu-${menuId}`);
                        if (submenu) { submenu.classList.remove('hidden'); }
                    });
                    document.querySelectorAll('.menu-item i:last-child').forEach(icon => { icon.classList.remove('hidden'); });
                }
            });
            
            // 初始化客户来源分布图表
            const initCustomerSourceChart = () => {
                const chartDom = document.getElementById('customer-source-chart');
                if (!chartDom) return null;
                
                const myChart = echarts.init(chartDom);
                
                const option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        top: 'center'
                    },
                    series: [
                        {
                            name: '客户来源',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 8,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 16,
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                { value: 35, name: '线上推广', itemStyle: { color: '#165DFF' } },
                                { value: 25, name: '客户推荐', itemStyle: { color: '#36CFC9' } },
                                { value: 20, name: '线下活动', itemStyle: { color: '#FF7D00' } },
                                { value: 15, name: '电话营销', itemStyle: { color: '#722ED1' } },
                                { value: 5, name: '其他渠道', itemStyle: { color: '#86909C' } }
                            ]
                        }
                    ]
                };
                
                option && myChart.setOption(option);
                
                // 监听窗口大小变化，调整图表大小
                window.addEventListener('resize', () => {
                    myChart.resize();
                });
                
                return myChart;
            };
            
            // 初始化产品销售分布图表
            const initProductSalesChart = () => {
                const chartDom = document.getElementById('product-sales-chart');
                if (!chartDom) return null;
                
                const myChart = echarts.init(chartDom);
                
                const option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: '{b}: ¥{c}'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '¥{value}'
                        }
                    },
                    yAxis: {
                        type: 'category',
                        data: ['产品A', '产品B', '产品C', '产品D', '产品E', '产品F']
                    },
                    series: [
                        {
                            name: '销售额',
                            type: 'bar',
                            data: [850000, 680000, 520000, 420000, 380000, 250000],
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                    { offset: 0, color: '#165DFF' },
                                    { offset: 1, color: '#4080FF' }
                                ])
                            },
                            barWidth: '60%'
                        }
                    ]
                };
                
                option && myChart.setOption(option);
                
                // 监听窗口大小变化，调整图表大小
                window.addEventListener('resize', () => {
                    myChart.resize();
                });
                
                return myChart;
            };
            
            // 初始化任务完成情况图表
            const initTaskCompletionChart = () => {
                const chartDom = document.getElementById('task-completion-chart');
                if (!chartDom) return null;
                
                const myChart = echarts.init(chartDom);
                
                const option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        bottom: 0,
                        left: 'center'
                    },
                    series: [
                        {
                            name: '任务状态',
                            type: 'pie',
                            radius: ['45%', '65%'],
                            center: ['50%', '40%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 8,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 16,
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                { value: 18, name: '已完成', itemStyle: { color: '#00B42A' } },
                                { value: 12, name: '进行中', itemStyle: { color: '#165DFF' } },
                                { value: 5, name: '未开始', itemStyle: { color: '#86909C' } },
                                { value: 3, name: '已延期', itemStyle: { color: '#F53F3F' } }
                            ]
                        }
                    ]
                };
                
                option && myChart.setOption(option);
                
                // 监听窗口大小变化，调整图表大小
                window.addEventListener('resize', () => {
                    myChart.resize();
                });
                
                return myChart;
            };
            
            // 初始化所有图表
            const customerSourceChart = initCustomerSourceChart();
            const productSalesChart = initProductSalesChart();
            const taskCompletionChart = initTaskCompletionChart();
            
            // 监听窗口大小变化，统一调整所有图表
            window.addEventListener('resize', () => {
                if (customerSourceChart) customerSourceChart.resize();
                if (productSalesChart) productSalesChart.resize();
                if (taskCompletionChart) taskCompletionChart.resize();
            });
            
            // 周日报相关交互逻辑
            const reportModal = document.getElementById('report-modal');
            const addReportBtn = document.getElementById('add-report-btn');
            const closeModalBtn = document.getElementById('close-modal');
            const cancelReportBtn = document.getElementById('cancel-report');
            const saveReportBtn = document.getElementById('save-report');
            const modalTitle = document.getElementById('modal-title');
            const reportTypeRadios = document.querySelectorAll('input[name="report-type"]');
            const reportDateInput = document.querySelector('input[name="report-date"]');
            const dailyDateContainer = document.getElementById('daily-date-container');
            const weeklyPeriodContainer = document.getElementById('weekly-period-container');
            const editReportBtns = document.querySelectorAll('.edit-report');
            const importReportBtn = document.getElementById('import-report-btn');
            const exportTemplateBtn = document.getElementById('export-template-btn');
            
            // 设置默认日期为今天
            const today = new Date().toISOString().split('T')[0];
            reportDateInput.value = today;
            
            // 设置本周开始和结束日期
            function setWeeklyDates() {
                const now = new Date();
                const day = now.getDay() || 7; // 将周日的0转换为7
                const startDate = new Date(now);
                startDate.setDate(now.getDate() - day + 1);
                const endDate = new Date(now);
                endDate.setDate(now.getDate() - day + 7);
                
                document.querySelector('input[name="week-start"]').value = startDate.toISOString().split('T')[0];
                document.querySelector('input[name="week-end"]').value = endDate.toISOString().split('T')[0];
            }
            
            // 初始化周报日期
            setWeeklyDates();
            
            // 切换报告类型
            reportTypeRadios.forEach(radio => {
                radio.addEventListener('change', function() {
                    if (this.value === 'weekly') {
                        modalTitle.textContent = '添加周报';
                        weeklyPeriodContainer.classList.remove('hidden');
                        dailyDateContainer.classList.add('hidden');
                    } else {
                        modalTitle.textContent = '添加日报';
                        weeklyPeriodContainer.classList.add('hidden');
                        dailyDateContainer.classList.remove('hidden');
                    }
                });
            });
            
            // 打开添加报告弹窗
            addReportBtn.addEventListener('click', function() {
                modalTitle.textContent = '添加日报';
                reportTypeRadios[0].checked = true;
                weeklyPeriodContainer.classList.add('hidden');
                dailyDateContainer.classList.remove('hidden');
                reportModal.classList.remove('hidden');
                document.getElementById('report-form').reset();
                reportDateInput.value = today;
                setWeeklyDates();
            });
            
            // 打开编辑报告弹窗
            editReportBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    // 在实际应用中，这里会加载现有报告数据
                    modalTitle.textContent = '编辑日报';
                    reportModal.classList.remove('hidden');
                    reportDateInput.value = today;
                });
            });
            
            // 关闭弹窗
            function closeModal() {
                reportModal.classList.add('hidden');
            }
            
            closeModalBtn.addEventListener('click', closeModal);
            cancelReportBtn.addEventListener('click', closeModal);
            
            // 点击模态框外部关闭
            reportModal.addEventListener('click', function(e) {
                if (e.target === reportModal) {
                    closeModal();
                }
            });
            
            // 保存报告
            saveReportBtn.addEventListener('click', function() {
                // 在实际应用中，这里会处理表单提交
                alert('报告保存成功！');
                closeModal();
                // 这里可以添加刷新列表的逻辑
            });
            
            // 导入报告
            importReportBtn.addEventListener('click', function() {
                // 创建文件输入元素
                const fileInput = document.createElement('input');
                fileInput.type = 'file';
                fileInput.accept = '.xlsx,.xls,.csv';
                
                fileInput.onchange = function(e) {
                    const file = e.target.files[0];
                    if (file) {
                        // 在实际应用中，这里会处理文件上传和解析
                        alert(`导入文件: ${file.name}`);
                    }
                };
                
                fileInput.click();
            });
            
            // 导出模板
            exportTemplateBtn.addEventListener('click', function() {
                // 在实际应用中，这里会生成并下载模板文件
                alert('导出模板功能已触发');
                // 示例：window.location.href = '/download/template';
            });
        });</script>  
 </body>
</html>